import { ScrollView } from 'react-native-gesture-handler';
import { Button, List, WhiteSpace, Flex, Toast, Modal, WingBlank } from '@ant-design/react-native';
const Item = List.Item;
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, ImageBackground } from 'react-native';
import { GetAllBankCard, setPublicCardState } from '~/api/public';

export default class MyCardBag extends Component {
    static navigationOptions = {
        title: '我的卡包',
    };

    constructor(props) {
        super(props);
        this.state = {
            itembank: '建设',
            itembanknumber: '卡号',
            list: [],
            PuBankcardID: '',
            dex: 0,
            beijing: [require('~/assets/my/hong.png'), require('~/assets/my/lan.png'), require('~/assets/my/zi.png'), require('~/assets/my/zhong.png'), require('~/assets/my/lu.png')],
        };
        GetAllBankCard().then((r) => {
            if (r.code === 0) {
                this.setState({
                    list: r.data,
                });
            } else {
                Toast.info('失败', 1);
            }
        });
    }
    render() {
        const onDele = (PuBankcardID) => {
            Modal.alert('提示', '删除成功', [{
                text: '确定', onPress: () => setPublicCardState({
                    PuBankcardID: PuBankcardID,
                    CardState: 0,
                }).then((r) => {
                    console.log(r);
                    if (r.code === 0) {
                        this.setState({
                            list: this.state.list.filter((item) => item.PuBankcardID != PuBankcardID),
                        });
                    } else {
                        Toast.info('删除失败', 1);
                    }
                })
            }, { text: '取消' }]);
        };
        return (
            <ScrollView style={{ backgroundColor: '#FFFFFF' }}>
                <View style={{ flex: 1 }}>
                    <WingBlank size='md'>
                        {this.state.list.map((item, index) => {
                            return (
                                <View style={{ width: '100%', height: 120, marginTop: 10 }}>
                                    <ImageBackground style={{ width: '100%', height: 120 }} borderRadius={5} source={this.state.dex < 5 ? (this.state.beijing[this.state.dex++]) : (this.state.dex = 0, this.state.beijing[this.state.dex++])}>
                                        <Flex direction='column'>
                                            <Flex justify='between' style={{ width: '100%' }}>
                                                <Text style={{ color: '#FFFFFF', marginTop: 20, fontSize: 16, marginLeft: 20 }}>{item.BankName}</Text>
                                                {/* <Flex onPress={() => { onDele(item.PuBankcardID) }}>
                                                    <Image style={{ width: 14, height: 14, marginRight: 20 }} source={require('~/assets/my/shanchu.png')} />
                                                </Flex> */}
                                            </Flex>
                                            <Flex style={{ width: '100%' }} align='start'>
                                                <Text style={{ color: '#FFFFFF', marginTop: 25, fontSize: 20, marginLeft: 20 }}>{item.CardNo}</Text>
                                            </Flex>
                                        </Flex>
                                    </ImageBackground>
                                </View>
                            );
                        })}
                    </WingBlank>
                        <Button
                            style={{ marginTop: '10%', marginLeft: '10%', marginRight: '10%' }}
                            type="warning"
                            onPress={() => {
                                this.props.navigation.push('AddBankCard', {
                                    PuBankcardID: 0,
                                });
                            }}>
                            添加银行卡
                </Button>
                </View>
            </ScrollView>
        );
    }
}
